
import { useIsMobile } from "@/hooks/use-mobile";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { MessageCircle } from "lucide-react";
import { Link } from "react-router-dom";

interface CommunityMember {
  id: string;
  name: string;
  avatar?: string;
  interests: string[];
}

interface CommunityPreviewProps {
  members: CommunityMember[];
  maxDisplay?: number;
}

export function CommunityPreview({ members, maxDisplay = 3 }: CommunityPreviewProps) {
  const isMobile = useIsMobile();
  const displayCount = isMobile ? 2 : maxDisplay;
  
  return (
    <div className="space-y-6">
      <div className="flex flex-col space-y-4">
        {members.slice(0, displayCount).map((member) => (
          <Link to="/community" key={member.id}>
            <Card className="hover:bg-accent/30 transition-colors">
              <CardContent className="p-4 flex items-center space-x-4">
                <Avatar className="w-12 h-12">
                  <AvatarImage src={member.avatar} />
                  <AvatarFallback>{member.name.charAt(0)}</AvatarFallback>
                </Avatar>
                <div className="flex-1">
                  <p className="font-medium">{member.name}</p>
                  <p className="text-sm text-muted-foreground">
                    Interests: {member.interests.slice(0, 2).join(", ")}
                    {member.interests.length > 2 && "..."}
                  </p>
                </div>
                <Button size="sm" variant="ghost" className="rounded-full">
                  <MessageCircle className="w-4 h-4 mr-2" />
                  Connect
                </Button>
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>
      
      <div className="flex justify-center">
        <Button asChild variant="secondary">
          <Link to="/community">View All Community Members</Link>
        </Button>
      </div>
    </div>
  );
}
